<template>
    <div style="padding-bottom:94px;">
        <div v-title>提交投保信息</div>
        <div class="box">
            <div class="title">
                <div>{{QuoteInfor.InsuranceName}}</div>
            </div>
            <van-checkbox-group v-model="result" @change="hh">
                <van-checkbox v-for="(item, index) in Lee" :key="index" :name="item.PolicyName+','+item.PolicyMoney" class="check" :disabled="item.PolicyTrue">
                    <div>
                        <h4>{{ item.PolicyName }}</h4>
                        <p>{{item.PolicyRemark}}</p>
                    </div>
                    <span>￥{{item.PolicyMoney}}</span>
                </van-checkbox>
            </van-checkbox-group>
            <van-checkbox v-model="special" class="check" v-if="QuoteInfor.IsMust == 0" @change="gg">
                <div>
                    <h4>交强险+车船使用税</h4>
                    <p style="color:#f33e16">不参与分期</p>
                </div>
                <span>￥{{QuoteInfor.MustMoney}}</span>
            </van-checkbox>
        </div>
        <div class="box">
            <div class="title">
                <div>车主信息</div>
            </div>
            <div class="info">
                <p>车主姓名：{{QuoteInfor.TrueName}}</p>
                <p>身份证号：{{QuoteInfor.IDNumber}}</p>
                <p>车牌号码：{{QuoteInfor.PlateNumber}}</p>
                <p>品牌型号：{{QuoteInfor.CarBrand}}</p>
                <p>车辆识别代号：{{QuoteInfor.VIN}}</p>
                <p>发动机号码：{{QuoteInfor.EngineNumber}}</p>
                <p>注册日期：{{QuoteInfor.RegistrationTime}}</p>
            </div>
            <div class="photo">
                <p>车主身份证正反面照片
                    <span>（上传照片要求字迹清晰可辨识）</span>
                </p>
                <div style="overflow: hidden;">
                    <Up @imgbase="Uone" style="width:48%;float:left;">
                    </Up>
                    <Up @imgbase="Utwo" style="width:48%;float:right;">
                    </Up>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="title">
                <div>保单寄送</div>
            </div>
            <div>
                <van-cell-group>
                    <van-field v-model="username" label="收件姓名" icon="clear" placeholder="请输入收件姓名" @click-icon="username = ''" />
                    <van-field v-model="userphone" label="手机号码" icon="clear" placeholder="请输入手机号码" @click-icon="userphone = ''" />
                    <div @click="show=true" style="border-bottom: 1px solid #eee;">
                        <van-field label="所在省市" placeholder="请选择所在省市" :value="changeAddress" disabled style="color:#333;" />
                    </div>
                    <van-field v-model="useraddress" label="详细地址" type="textarea" placeholder="请输入详细地址，以便尽快收到相关保单资料" rows="1" autosize/>
                </van-cell-group>
                <van-popup position="bottom" v-model="show">
                    <van-area :columns-num="2" :area-list="areaList" @confirm="confirm" @cancel="cancel" />
                </van-popup>
            </div>
        </div>
        <div class="bottom">
            <div class="kf" @click="phone">
                <a class="iconfont icon-kefu"></a>
                <p>客服</p>
            </div>
            <div class="total">
                合计金额：
                <span>￥{{total}}</span>
            </div>
            <div class="next" @click="next()" v-show="twice == false">
                确认提交
            </div>
            <div class="next" v-show="twice == true">
                <van-loading type="circle" color="black" style="display: inline-block; margin-right: 10px; top: -2px;" />提交中...
            </div>
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js';
import Address from '../js/addressData.json'
import upload from '../components/loadImg.vue'
import { Checkbox, CheckboxGroup, Field, Cell, CellGroup, Area, Popup, Toast, Loading } from 'vant';
export default {
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [Field.name]: Field,
        [Area.name]: Area,
        [Popup.name]: Popup,
        [Toast.name]: Toast,
        [Loading.name]: Loading,
        'Up': upload,
    },
    data() {
        return {
            //省市选择
            show: false,
            areaList: Address.arealist,
            changeAddress: '',
            //保单寄送资料
            username: '',
            userphone: '',
            useraddress: '',
            userprovince: '',
            usercity: '',
            provinceID: '',
            cityID: '',
            //保险数组
            Lee: [],
            result: [],
            special: true,
            //自定义
            UpImg1: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
            UpImg2: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
            Img1: '',
            Img2: '',
            QuoteInfor: '',
            total: 0,
            jasoname: [],
            jasonprice: [],
            twice: false,
        }
    },
    created() {
        api.Post('Order/QuoteInfo/GetOneModel', { ID: this.$route.params.id })
            .then(res => {
                this.QuoteInfor = res
                this.QuoteInfor.RegistrationTime = res.RegistrationTime.split(' ')[0]
                var jason = JSON.parse(res.InsuranceCategory)
                for (var i = 0; i < jason.PolicyName.length; i++) {
                    this.Lee.push({
                        PolicyName: jason.PolicyName[i],
                        PolicyMoney: jason.PolicyMoney[i],
                        PolicyTrue: '',
                        PolicyRemark: jason.PolicyRemark[i],
                    })
                    if (jason.PolicyTrue[i] == 0) {
                        this.Lee[i].PolicyTrue = true
                    } else {
                        this.Lee[i].PolicyTrue = false
                    }
                    this.result.push(jason.PolicyName[i] + ',' + jason.PolicyMoney[i])
                }
            })
    },
    methods: {
        next() {
            var data = {
                OfferID: this.$route.params.id,
                InsuranceCategory: JSON.stringify({ PolicyName: this.jasoname, PolicyMoney: this.jasonprice }),
                TotalAmount: this.total,
                Addressee: this.username,
                ContactPhone: this.userphone,
                ProvinceName: this.userprovince,
                ProvinceID: this.provinceID,
                CityName: this.usercity,
                CityID: this.cityID,
                DetailedAddress: this.useraddress,
                IDFrontPhoto: this.Img1,
                IDAfterPhoto: this.Img2,
                IsMust: this.QuoteInfor.IsMust,
                MustMoney: this.QuoteInfor.MustMoney,
            }
            if (this.special == true) {
                data.IsMust = 0
            } else {
                data.IsMust = 1
            }
            if (data.Addressee == '') {
                Toast.fail('请填写收件姓名！');
                return;
            }
            if (data.ContactPhone == '') {
                Toast.fail('请填写手机号码！');
                return;
            }
            if (data.ProvinceName == '' || data.CityName == '') {
                Toast.fail('请选择所在省市！');
                return;
            }
            if (data.DetailedAddress == '') {
                Toast.fail('请填写详细地址！');
                return;
            }
            if (data.IDFrontPhoto == '' || data.IDAfterPhoto == '') {
                Toast.fail('请检查照片是否上传完整！');
                return;
            }
            this.twice = true
            api.Post('Order/DraftInfo/AddDraft', data)
                .then(res => {
                    if (res.Success == true) {
                        //报价ID+草稿ID
                        this.$router.push('/OrderDetail/' + this.$route.params.id + '/' + res.Infor)
                    } else {
                        this.twice = false
                        Toast.fail(res.Msg);
                    }
                })
        },
        //获取选中列
        hh() {
            this.jasoname = []
            this.jasonprice = []
            for (var i = 0; i < this.result.length; i++) {
                this.jasoname.push(this.result[i].split(',')[0])
                this.jasonprice.push(this.result[i].split(',')[1])
            }
            this.gg()
        },
        //计算合计金额
        gg() {
            this.total = 0
            if (this.special == true) {
                for (var i = 0; i < this.result.length; i++) {
                    this.total = this.total + parseFloat(this.result[i].split(',')[1])
                }
                this.total = this.total + parseFloat(this.QuoteInfor.MustMoney)
            } else {
                for (var i = 0; i < this.result.length; i++) {
                    this.total = this.total + parseFloat(this.result[i].split(',')[1])
                }
            }
        },
        //图片上传
        Uone(s) {
            this.UpImg1 = s
            this.Img1 = s
        },
        Utwo(s) {
            this.UpImg2 = s
            this.Img2 = s
        },
        //省市区选择
        confirm(Num) {
            for (var i = 0; i < Num.length; i++) {
                if (Num[i].code == -1) {
                    Toast.fail('请正确选择省市！');
                    return;
                }
            }
            this.provinceID = Num[0].code.substr(0, 2)
            this.cityID = Num[1].code.substr(2, 3)
            this.userprovince = Num[0].name
            this.usercity = Num[1].name
            this.changeAddress = Num[0].name + Num[1].name
            this.show = false;
        },
        cancel() {
            this.show = false;
        },
        phone() {
            window.location.href = "tel:400-170-1235";
        }
    }
}
</script>
<style scoped>
.box {
    width: 94%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px;
}

.title {
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

.title div {
    border-left: 3px solid #2491ff;
    padding-left: 7px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

.check {
    padding: 10px 0;
    margin: 0 10px;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.check h4 {
    margin: 0;
    font-weight: normal;
}

.check p {
    margin: 0;
    color: #999;
    font-size: 12px;
}

.check span {
    position: absolute;
    right: 0;
    top: 20px;
    color: #333;
    font-size: 14px;
}

.info {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
}

.info p {
    margin: 0;
    padding: 10px 0 0 0;
    font-size: 14px;
    color: #333;
}

.photo {
    margin: 0 10px;
    padding-bottom: 15px;
}

.photo p {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
}

.photo span {
    font-size: 12px;
    color: #999;
}

.photo img {
    width: 42vw;
    height: 28vw;
    border-radius: 3px;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    height: 60px;
    border-top: 1px solid #eee;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.kf {
    width: 17%;
    float: left;
    border-right: 1px solid #eee;
    margin-right: -1px;
    text-align: center;
    height: 60px;
}

.kf a {
    color: #2491ff;
    font-size: 24px;
    margin-top: 10px;
    display: block;
}

.kf p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.total {
    width: 47%;
    float: left;
    line-height: 60px;
    text-align: center;
    color: #666666;
    font-size: 14px;
}

.total span {
    color: #f33e16;
    font-size: 16px;
}

.next {
    width: 36%;
    float: right;
    line-height: 60px;
    background: #2491ff;
    color: #fff;
    text-align: center;
    font-size: 16px;
}
</style>
<style>
.van-checkbox__control:checked+.van-icon-success {
    border-color: #2491ff;
    background-color: #2491ff;
}
</style>
<style src="../css/iconfont.css"></style>